<template>
	<page-meta :page-style="popupShow ? 'overflow: hidden;' : ''" />
	<view>
		<view class="quick-entry-container">
			<view class="tips">在系统录入过花名册的人员，可通过证件号快速录入。</view>
			<view class="seach-input-container">
				<commonIcon type="icon-a-sousuo1x" :size="24" />
				<input type="text" placeholder="搜索身份证号" placeholder-class="placeholder-class" class="search-ipt" v-model="identityNumber" @input="search" auto-focus focus />
				<commonIcon type="icon-qingchu" :size="40" class="clear-icon" v-if="identityNumber" @tap="clear" />
			</view>
			<view class="error" v-if="hasSearch && isErr">
				<commonIcon type="icon-tishi1" :size="32" class="result-icon"></commonIcon>
				<text>{{ errMsg }}</text>
			</view>
			<view class="search-result" v-if="hasSearch && !isErr">
				<commonIcon type="icon-chenggong" :size="32" class="result-icon"></commonIcon>
				<text>查询到：</text>
				<text class="person-info">{{ detailInfo.name }}</text>
				<text class="person-info">{{ detailInfo.identityNumber }}</text>
			</view>
			<view class="btn" hover-class="common-btn" v-if="hasSearch && !isErr" @tap="toComfirmInfo">确认录入</view>
		</view>

		<!-- 重点管控人员提示 -->
		<!-- <van-popup :show="popupShow" @close="onClose" position="bottom" custom-style="height: 50%;" round>
			<view class="popup-container">
				<view class="popup-title">重点管控人员提示</view>
				<view class="abnormal-personnel-tips">
					<commonIcon type="icon-tishi" :size="32" />
					<text class="abnormal-tips-content">{{ abnormalPersonnelName }}属于重点管控人员名单人员</text>
				</view>
				<scroll-view class="popup-scroll" scroll-y>
					<view class="abnormal-personnel-list">
						<view class="abnormal-personnel-item" v-for="(item, index) in abnormalPersonnelRecords" :key="index">
							<view class="project-name">{{ item.projectName }}</view>

							<view class="abnormal-reason">{{ item.recordTimeData }}，{{ item.reason }}</view>
						</view>
					</view>
				</scroll-view>
				<view class="common-btns-container">
					<view class="common-btn-container" @tap="sureEnter" hover-class="common-btn">继续录入</view>
					<view class="common-btn-container general" @tap="onClose" hover-class="common-btn">放弃录入</view>
				</view>
			</view>
		</van-popup> -->
	</view>
</template>

<script>
import { common } from '@/pagesA/utils/common.js';
import commonIcon from '@/pagesA/components/common/icon/icon';
import moment from 'moment';
const app = getApp();
export default {
	components: {
		commonIcon
	},
	data() {
		return {
			identityNumber: '',
			hasSearch: false,
			isErr: false,
			errMsg: '',
			detailInfo: {
				name: '',
				identityNumber: ''
			},
			popupShow: false,
			abnormalPersonnelRecords: [],
			abnormalPersonnelName: ''
		};
	},
	onLoad(options) {},
	onShow() {},
	methods: {
		search(e) {
			common.commonMethods.debounce(() => {
				this.getRosterByIdentityNumber();
			});
		},
		clear() {
			this.identityNumber = '';
			this.hasSearch = false;
		},
		getRosterByIdentityNumber() {
			if (!this.identityNumber) {
				this.clear();
				return;
			}
			common.apis.roster
				.getRosterByIdentityNumber({
					identityNumber: this.identityNumber
				})
				.then(
					(res) => {
						uni.hideLoading();
						let detailInfo = res.data;
						this.detailInfo = detailInfo;
						this.hasSearch = true;
						this.isErr = false;
					},
					(err) => {
						uni.hideLoading();
						this.hasSearch = true;
						this.isErr = true;
						this.errMsg = err.msg || err.errMsg;
					}
				);
		},
		onClose() {
			this.popupShow = false;
		},
		toComfirmInfo() {
			if (this.detailInfo.isAbnormalPersonnel) {
				//重点管控人员
				let abnormalPersonnelRecords = this.detailInfo.abnormalPersonnelRecords || [];
				let abnormalPersonnelName = '';
				for (let item of abnormalPersonnelRecords) {
					item.recordTimeData = moment(item.recordTime).format('YYYY/MM/DD');
					abnormalPersonnelName = item.name;
				}
				this.popupShow = true;
				this.abnormalPersonnelRecords = abnormalPersonnelRecords;
				this.abnormalPersonnelName = abnormalPersonnelName;
			} else {
				this.sureEnter();
			}
		},

		sureEnter() {
			//确定录入
			uni.setStorageSync('hasDistinguishInfo', true);
			uni.setStorageSync('distinguishInfo', this.detailInfo);
			this.onClose();
			uni.navigateTo({
				url: '/pagesA/pages/roster/register/comfirmInfo/comfirmInfo'
			});
		}
	}
};
</script>
<style>
.quick-entry-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.tips {
	height: 72rpx;
	background: #f6f7fa;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #9aa2c3;
	line-height: 72rpx;
	padding: 0 32rpx;
}

.seach-input-container {
	background: #eff1f6;
	border-radius: 6rpx;
	display: flex;
	align-items: center;
	padding: 16rpx 24rpx;
	border-radius: 8rpx;
	margin: 24rpx 32rpx;
}

.seach-input-container .search-ipt {
	margin-left: 12rpx;
	flex: 1;
}

.seach-input-container .clear-icon {
	margin-left: auto;
}

.search-result,
.error {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #1e253f;
	margin: 0 32rpx;
}

.error {
	color: #ff555c;
}

.result-icon {
	margin-right: 8rpx;
}

.search-result .person-info {
	color: #0071f7;
	margin-right: 24rpx;
}

.btn {
	margin: auto auto 50rpx;
	min-width: 318rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #0071f7;
	border-radius: 8rpx;
	font-size: 30rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
	padding: 16rpx 0;
	cursor: pointer;
}

/* 重点管控人员弹框样式 */
.popup-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.popup-title {
	background-color: #f4f6f9;
	height: 96rpx;
	line-height: 96rpx;
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #353b4e;
	padding-left: 32rpx;
}

.abnormal-personnel-tips {
	display: flex;
	align-items: center;
	padding-left: 32rpx;
	font-size: 32rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #353b4e;
	margin: 24px 0;
}

.abnormal-personnel-tips .abnormal-tips-content {
	margin-left: 16rpx;
}

.popup-scroll {
	flex: 1;
	height: 0;
	box-sizing: border-box;
	padding: 0 24px;
	font-size: 30rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #747e99;
}

.abnormal-personnel-list {
	padding-bottom: 32rpx;
}

.abnormal-personnel-item {
	margin-bottom: 32rpx;
}

.abnormal-personnel-item .project-name,
.abnormal-personnel-item .abnormal-reason {
	word-break: break-all;
}

.general {
	background: #ff555c;
}
</style>
